<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-container>
      <el-aside class="el-aside" width="200px" style="background-color: #19374b">
        <user-menu/>
      </el-aside>
      <el-main class="elMain padding0">
        <el-row>
           <el-col :span="24" class="bgWhite">
               <el-breadcrumb separator=">" class="paddingLeft68">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>用户中心</el-breadcrumb-item>
                    <el-breadcrumb-item>个人信息</el-breadcrumb-item>
                </el-breadcrumb>
           </el-col>
       </el-row>
        <!-- 主要信息 -->
        <div class="width1124 marginTop70 marginLeft202 bgWhite borderLeft10">
            <el-row>
            <el-col :span="10" :offset="2">
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="真实姓名：" class="marginTop20">
                        <el-input v-model="form.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="在职企业：">
                        <el-input v-model="form.company"></el-input>
                    </el-form-item>
                    <el-form-item label="职位：">
                        <el-input v-model="form.position">职位</el-input>
                    </el-form-item>
                    <el-form-item label="工作邮箱：">
                        <el-input v-model="form.workEMail">1284629851@qq.com</el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="onSubmit">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="10" :offset="2">
                <el-row class="marginTop63">
                    <el-col :span="5" :offset="3" class="paddingLeft15 borderLeft">
                        更换头像
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5" :offset="3">
                        <el-upload
                            class="avatar-uploader"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-col>
                </el-row>
            </el-col>
            </el-row>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>
<style scoped>
/* 文件上传开始 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    border: 1px dashed #cccccc;
    margin-top: 20px;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
/* 文件上传结束 */
/* 储能项目开始 */
.itemTitle{
  line-height: 84px;
  color: #333333;
  font-size: 24px;
}
/* 储能项目结束 */

.companyAddress,.companySize{
  font-size: 16px;
  color: #c1c1c1;
}
.companyYear{
  font-size: 16px;
  color: #c1c1c1;
  margin: 26px 0;
}
.companyTitle{
  font-size: 20px;
  color: #666666;
  line-height: 26px;
}
.el-breadcrumb,
.el-breadcrumb__separator{
  line-height: 50px;
  font-size: 14px;
  color: #666666;
}
.el-breadcrumb__inner{
  font-size: 14px;
  color: #666666;
  font-weight: 500 !important;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}
.elMain {
  right: 0;
  position: relative;
  padding: 0;
}
.el-container {
  border: 0 !important;
}
</style>
<script>
  import UserMenu from '../../layout/default/components/menu/userMenu'
export default {
  name: "personalInformation",
  components: {
    UserMenu
  },
  data() {
    return{
        imageUrl: '',
      form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    onSubmit() {
      console.log('submit!');
    },
    handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        }
  }
};
</script>
